<template>
	<view class="loading" style="position: relative; width: 750rpx;height: 100vh;text-align: center;" v-if="isLoading">
		<view class="text position-center" style="width: 750rpx;">
			{{title}}
		</view>
	</view>
	<view class="please please-index flex-column-around">
		<view class="info flex-column-around">
			<view class="phone-code info-item flex-row">
				<view class="label">手机号<text style="color: red;">{{ phoneOk?'':'*' }}</text></view>
				<input v-model="phone" @input="phoneIn" type="number" class="inp" placeholder="手机号"/>
			</view>
			<view class="true-name info-item flex-row">
				<view class="label">真实姓名<text style="color: red;">{{ fullnameOk?'':'*' }}</text></view>
				<input v-model="fullname" @input="fullnameIn" type="text" class="inp" placeholder="真实姓名"/>
				
			</view>
			<view class="business-code info-item flex-row">
				<view class="label">商户号</view>
				<input v-model="payNo" type="text" class="inp" placeholder="商户号"/>
			</view>
			<view class="tip info-item">
				<view class="tip">
					提示：如果没有微信支付商户号，请到微信支付商户号官网申请，如不清楚，请联系客服
				</view>
			</view>
		</view>
		<view class="content">
			<rich-text :nodes="content"></rich-text>
		</view>
		<view class="yes-radio">
			<label class="radio">
				<radio color="blue" value="1" :checked="checked" @click="checked=!checked"/>
				<text @click="checked=!checked">我已阅读并同意以上内容</text>
			</label>
		</view>
		<view class="yes-button">
			<view @click="submit" class="btn-body position-center">
				确认
			</view>
		</view>
	</view>
</template>

<script>
	import request from '../../../utils/request.js';
	import { GET_USER_INFO } from '../../../utils/CommonValues.js';
	export default {
		data() {
			return {
				fullnameOk: false,
				phoneOk: false,
				title: '加载中...',
				isLoading: true,
				content: '<h3>营销会员电子告知协议</h3><br>' +
							'<h5>尊敬的客户:</h5><br>' + 
							'&emsp;&emsp;感谢您对我们营销服务的关注！为了给您提供更加专属和高效的营销支持，我们特别推出了营销会员服务。成为我们的营销会员，您将享受专属的营销资源、策略指导以及定制化的服务方案，助力您的业务快速发展。' +
							'请您注意，成为营销会员需支付一定的会员费用，并且我们承诺对您的商业信息保密，不会泄露给任何第三方。本协议仅为告知性质，无需电子签名，您了解并同意后即可享受会员服务。' +
							'期待您的加入，共同开创营销新篇章!<br>' +
							'[服务商名称]',
				checked: false,
				fullname: '',
				payNo: '',
				memberTele: ''
			}
		},
		onLoad() {
			this.getStatus();
		},
		methods: {
			getStatus() {
				GET_USER_INFO().then(response => {
					request.GET(`/system/members/${response.advMembersId}`)
						   .then(res => {
								if(res.code === 200) {
									console.log(res.data.isSaler, "状态");
									if(res.data.isSaler == 1) {
									    // 是
										this.isLoading = true;
									    this.title = '您已经是营销会员了, 无需再申请';
									}else if(res.data.isSaler == 2) {
									    // 否
									    this.isLoading = false;
									}else if(res.data.isSaler == 3) {
									    // 待定
										this.isLoading = true;
									    this.title = '您的申请正在审核中';
									} else {
										this.isLoading = false;
									}
								}
						   })
				})
			},
			phoneIn(phone) {
				console.log(phone.detail.value);
				if(phone.detail.value) {
					this.phoneOk = true;
				} else {
					this.phoneOk = false;
				}
			},
			fullnameIn(fullname) {
				console.log(fullname.detail.value);
				if(fullname.detail.value) {
					this.fullnameOk = true;
				} else {
					this.fullnameOk = false;
				}
			},
			submit() {
				if(this.fullnameOk && this.phoneOk) {
					if(this.checked) {
						GET_USER_INFO().then(response => {
							request.PUT('/system/members', {
								advMembersId: response.advMembersId,
								memberFullname: this.fullname,
								isSaler: 3,
								payNo: this.payNo,
								memberTele: this.phone
							}).then(res => {
								if(res.code === 200) {
									uni.showToast({
										title: '申请成功'
									})
									this.getStatus();
								} else {
									uni.showToast({
										title: '申请失败',
										icon: 'error'
									})
								}
								console.log(res)
							})
						})
					} else {
						uni.showToast({
							title: '请先勾选同意协议'
						})
					}
				} else {
					uni.showToast({
						title: '请输入完整信息',
						icon: 'error'
					})
				}
			}
		}
	}
</script>

<style lang="less">
.info {
	width: 700rpx;
	height: 30vh;
	.info-item {
		width: 100%;
		height: 35px;
		.label {
			width: 200rpx;
			height: 35px;
			line-height: 35px;
			font-weight: bold;
			text-align-last: justify;
		}
		.inp {
			box-sizing: border-box;
			width: 450rpx;
			height: 30px;
			border-radius: 5px;
			border: 1px solid black;
			padding: 0 5px;
		}
	}
	.tip {
		line-height: 16px;
		font-size: 14px;
		color: #aaa;
	}
}
.content {
	width: 700rpx;
	height: 50vh;
	padding-top: 10px;
	margin: 0 auto;
	overflow-y: auto;
}
.yes-radio {
	width: 700rpx;
	margin: 10px auto 0;
}
.yes-button {
	position: relative;
	width: 750rpx;
	height: 12vh;
	box-sizing: border-box;
	.btn-body {
		box-sizing: border-box;
		width: 700rpx;
		height: 40px;
		border-radius: 20px;
		background-color: royalblue;
		text-align: center;
		line-height: 40px;
		font-weight: bold;
		color: #fff;
		letter-spacing: 10px;
	}
}
</style>
